<template>
  <div class="search-list">
    <div class="search-top">
      <div class="search">
        <el-input
          v-if="inputSelect"
          :placeholder="placeholder"
          v-model="searchInput"
          class="input-with-select"
          clearable
        >
          <el-select v-model="searchSelValue" slot="prepend" placeholder="请选择" class="search-sel">
            <el-option v-for="item in searchOptions" :key="item.value" :label="item.label" :value="item"> </el-option>
          </el-select>
          <!-- <i slot="suffix" class="el-icon-search" style="cursor: pointer" @click="searchClick"></i> -->
        </el-input>
        <el-input v-else :placeholder="placeholder" v-model="searchInput" class="input-with-select" clearable>
        </el-input>
      </div>
      <div class="btn">
        <el-button type="primary" size="mini" @click="searchClick" icon="el-icon-search" style="margin-right: 5px"
          >搜索</el-button
        >
        <el-button size="mini" icon="el-icon-refresh-left" @click="resetClick">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchCommonView",
  components: {},
  props: {
    placeholder: {
      type: String,
      default: "请输入内容"
    },
    inputSelect: {
      type: Boolean,
      default: true
    },
    queryClass: {
      type: String,
      default: "1"
    },
    queryClassOptions: {
      type: Array,
      default: () => []
    },
    searchSel: {
      type: Object,
      default: () => {
        return {
          value: "name",
          label: ""
        }
      }
    },
    searchOptions: {
      type: Array,
      default: () => []
    },
    labelSearch: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      queryClassValue: this.queryClass,
      searchInput: "",
      searchSelValue: this.searchSel,
      isTileSearch: false,
      tileSearchData: [
        {
          selField: "客户名称",
          selCondition: "包含",
          keywords: "",
          filterCriteria: "且"
        },
        {
          selField: "客户名称",
          selCondition: "包含",
          keywords: "",
          filterCriteria: "且"
        },
        {
          selField: "客户名称",
          selCondition: "包含",
          keywords: "",
          filterCriteria: "且"
        }
      ],
      selFieldList: ["客户名称", "销售线索编号", "联系人职务"],
      selConditionList: ["无", "包含", "等于", "不等于", "不包含", "是空值", "不是空值"],
      filterCriteriaList: ["且", "或"],
      value2: true
    }
  },
  methods: {
    searchClick() {
      this.$emit("searchClick", this.searchSelValue, this.searchInput)
    },
    resetClick() {
      this.searchSelValue = this.searchSel
      this.searchInput = ""
      this.$emit("resetClick")
    },
    // 高级查找
    highSearchClick() {},
    // 平铺查找
    tileSearchClick() {
      this.isTileSearch = !this.isTileSearch
    },
    labelSearchClick() {},
    // 删除
    handleClick(row) {
      console.log(row)
    },
    // 新条件
    addBtn() {
      this.tileSearchData.push({
        selField: "客户名称",
        selCondition: "包含",
        keywords: "",
        filterCriteria: "且"
      })
    },
    // 查找后是否隐藏
    hideSwitch() {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.search-list {
  font-size: 13px;
  color: #333;
  .search-top {
    display: flex;
    align-items: center;
    .query-class {
      display: flex;
      height: 60px;
      line-height: 60px;
      .query-class-title {
        margin-left: 10px;
      }
      .query-class-sel {
        width: 165px;
        margin-left: 10px;
      }
      .query-class-btn {
        font-size: 16px;
        margin-left: 10px;
        color: #bebebe;
        cursor: pointer;
      }
    }
    .search {
      height: 60px;
      line-height: 60px;
      margin-left: 20px;
      .el-icon-search {
        margin-top: 7px;
      }
    }
    .btn {
      margin-left: 10px;
    }
  }
}

::v-deep {
  .el-input__inner {
    height: 30px;
    color: #2765e1;
  }
  .el-input__prefix,
  .el-input__suffix {
    height: 30px;
  }
  .el-input__icon {
    line-height: 30px;
  }
  .search {
    .el-select .el-input {
      width: 130px;
    }
    .input-with-select .el-input-group__prepend {
      background-color: #fff;
    }
    .el-input__suffix {
      // 处理前缀图标不垂直居中的问题
      height: auto;
      font-size: 15px;
      &-inner {
        flex-direction: row-reverse;
        -webkit-flex-direction: row-reverse;
        display: flex;
      }
    }
    .el-input--suffix .el-input__inner {
      padding-right: 45px;
    }
    .search-sel .el-input--suffix .el-input__inner {
      padding-left: 5px;
      padding-right: 20px;
    }
  }
}
</style>
